<template>
    <Particles />
    <footer class="bg-white border-t border-gray-200 dark:bg-gray-800 dark:border-gray-700">
        <div class="py-12 container-custom">
            <div class="grid gap-44 md:grid-cols-3">
                <!-- 公司信息 -->
                <div class="space-y-4">
                    <router-link to="/" class="flex items-center space-x-3">
                        <!-- <img v-if="!isDark" src="../assets/home_logo.jpeg" alt="Logo" class="w-auto h-8" />
                        <img v-else src="../assets/logo.png" alt="Logo" class="w-auto h-8" /> -->
                        <span class="text-lg font-bold text-gray-900 dark:text-white">西旺(西安)数字科技有限公司</span>
                    </router-link>
                    <p class="text-gray-600 dark:text-gray-400">
                        致力于为客户提供更快速,更便捷的外贸报价平台和工具,为外贸企业提供创新的数字化解决方案
                    </p>
                </div>

                <!-- 快速链接 -->
                <div>
                    <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">快速链接</h3>
                    <ul class="space-y-2">
                        <li v-for="item in menuItems" :key="item.path">
                            <router-link
                                :to="item.path"
                                class="text-gray-600 transition-colors hover:text-primary dark:text-gray-400 dark:hover:text-white">
                                {{ item.name }}
                            </router-link>
                        </li>
                    </ul>
                </div>

                <!-- 联系方式 -->
                <div>
                    <h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">联系我们</h3>
                    <ul class="space-y-2">
                        <li class="flex items-center space-x-2 text-gray-600 dark:text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                            </svg>
                            <span>158 1155 2808</span>
                        </li>
                        <li class="flex items-center space-x-2 text-gray-600 dark:text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                            <span>zhangjy@1pei.com.cn</span>
                        </li>
                        <li class="flex items-center space-x-2 text-gray-600 dark:text-gray-400">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            <span>陕西省西安市雁塔云水二路大华股份数智产业园 7座 301</span>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 版权信息 -->
            <div class="flex justify-around pt-8 mt-8 text-center border-t border-gray-200 dark:border-gray-700">
                <p class="text-gray-600 dark:text-gray-400">备案号：陕ICP备2025060278号</p>
                <p class="text-gray-600 dark:text-gray-400">
                    © {{ new Date().getFullYear() }} 西旺数字科技. 保留所有权利.
                </p>
            </div>
        </div>
    </footer>
</template>

<script setup lang="ts">
import { useDarkMode } from "../composables/useDarkMode";

const { isDark } = useDarkMode();

console.log(isDark);
const menuItems = [
    { name: "首页", path: "/" },
    { name: "产品中心", path: "/products" },
    { name: "关于我们", path: "/about" },
    { name: "联系我们", path: "/contact" },
];
</script>
